<!--
 * @Author: wuzhen
 * @Date: 2019-01-22 11:29:24
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-04 13:34:00
 * @Description: 公用头部组件
 -->
<template>
  <Header class="i-layout-header i-layout-header-fix" :style="styleHeader" :class="[
      'i-layout-header-color-' + headerColor,
      headerStick ? 'i-layout-header-stick' : '',
      isCollapse ? 'i-layout-header-collapse' : ''
    ]">
    <a href="/" target="_self" class="i-layout-header-logo" v-if="headerStick"><img :src="logoImg" /><span>管理平台</span></a>
    <slot name="collapsible"></slot>
    <!-- 面包屑导航 -->
    <div class="i-layout-header-bread" v-if="$theme.showBread">
      <Breadcrumb>
        <BreadcrumbItem v-for="(item, index) in breads" :key="index">{{
          item.meta.title
        }}</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <!-- 右侧 -->
    <div class="i-layout-header-right">
      <span class="i-layout-header-trigger" v-if="showFullscreen">
        <full-screen v-model="isFullscreen" />
      </span>
      <user :message-unread-count="10" :user-avator="userAvator" />
      <!-- 主题风格设置 -->
      <span class="i-layout-header-trigger i-layout-header-trigger-min" @click="themeDrawer = true">
        <Icon type="md-more" :size="18" />
      </span>
      <Drawer v-model="themeDrawer">
        <theme-set @change="changeTheme" />
      </Drawer>
    </div>
  </Header>
</template>

<script>
import { setLocale } from "@/config/auth";
import User from "./children/User";
import FullScreen from "./children/FullScreen";
import ThemeSet from "./children/ThemeSet";
export default {
  components: {
    User,
    FullScreen,
    ThemeSet
  },
  props: {
    theme: {
      type: String,
      default: "dark"
    }
  },
  data() {
    return {
      headerColor: this.$theme.headerColor,
      headerStick: this.$theme.headerStick,
      showFullscreen: this.$theme.showFullscreen,
      isCollapse: false,
      logoImg: require("@/assets/images/logo.png"),
      userAvator: require("@/assets/images/icon/avator.png"),
      isFullscreen: false,
      themeDrawer: false
    };
  },
  computed: {
    breads() {
      return this.$route.matched;
    },
    styleHeader() {
      return {
        width: this.headerStick
          ? "calc(100% - 0px)"
          : this.isCollapse // eslint-disable-next-line
          ? "calc(100% - 80px)" // eslint-disable-next-line
          : `calc(100% - ${this.$config.menuWidth}px)`,
        left: this.headerStick
          ? "0px" // eslint-disable-next-line
          : this.isCollapse // eslint-disable-next-line
          ? "80px" // eslint-disable-next-line
          : `${this.$config.menuWidth}px`
      };
    }
  },
  methods: {
    // 切换theme
    changeTheme(key, value) {
      this[key] = value;
    },
    // 菜单展开关闭
    onCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 语言切换
    onChangeLang(name) {
      setLocale(name);
      this.$i18n.locale = name;
    }
  }
};
</script>

<style lang="less">
.i-layout {
  &-header {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    transition: all 0.2s ease-in-out;
    padding: 0;
    // 固定顶栏
    &-fix {
      position: fixed;
      top: 0;
      right: 0;
      left: 200px;
      z-index: 11;
    }
    // 菜单展开关闭
    &-collapse {
      left: 80px;
    }
    &-stick {
      left: 0;
      z-index: 14;
    }
    &-color {
      &-primary {
        background: #2173dc;
        background: linear-gradient(90deg, #1d42ab, #2173dc, #1e93ff);
        color: #fff;
        .ivu-breadcrumb {
          color: #fff;
          & > span:last-child {
            color: #ccc;
          }
        }
      }
      &-dark {
        background: #191a23;
        color: #fff;
      }
    }
    &-logo {
      display: inline-block;
      height: 64px;
      line-height: 64px;
      img {
        height: 50%;
        vertical-align: middle;
        display: inline-block;
      }
      span {
        font-size: 18px;
        color: #333;
        margin-left: 10px;
      }
    }
    &-bread {
      display: inline-block;
      padding: 0 12px;
      .ivu-breadcrumb > span:last-child {
        font-weight: 400;
      }
    }
    &-text {
      padding: 0 12px;
    }
    &-right {
      height: 64px;
      float: right;
    }
    &-trigger {
      display: inline-block;
      width: 64px;
      height: 64px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      &-min {
        width: auto;
        padding: 0 12px;
      }
    }
  }
}
.layout-header-bar {
  padding: 0 30px 0 20px;
  box-shadow: 0px 1px 4px 0px rgba(159, 160, 161, 0.32);
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 999;
  align-items: center;
}
.layout-logo {
  display: flex;
  align-items: center;
  img {
    width: 94px;
    display: inline-block;
    margin-right: 20px;
  }
  span {
    font-size: 12px;
    color: #8c8c8c;
    letter-spacing: 5px;
  }
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
</style>
